<script>
import F07 from './components/F07.vue'
export default {
  data() {
    return {
      message: "这是App.vue",
      app: "app.vue",
      obj: {
        name: "王五"
      }
    }
  },
  components: {
    F07
  },
  // provide: {  // 提供被注入的数据
  //   user: "张三",
  //   age: 18,    
  // }
  provide() {  // 直接使用引入已经定义好的的数据
    return {
      // 1、如果要实现动态响应的传递，注入的必须是一个对象，而且用这种return方式引入
      obj: this.obj,
      // 2、或者直接将数据通过链式函数变为响应式
      message: () => this.message
    }
  }
}
</script>
  
<template>
  <div>
    <h1>{{message}}</h1>
    <button @click="message='啊啊啊啊！'">改变message的值</button>
    <h1>obj:{{obj.name}}</h1>
    <button @click="obj.name='谭嗣同'">改变obj的值</button>
  </div>
  <div>
    <F07></F07>
  </div>
</template>